<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    color: ['#8CACFF','#FF7CA2','#BD7EFF','#89DFA9'],
    title: {
      text: 'titleTxts',
      left: 'center',
        textStyle: {
            fontSize: 16,
            color: '#333B48',
            fontFamily: '微软雅黑',
            fontWeight: 'normal'
        }
  },
    legend: {
      textStyle:{
        fontSize: 12,
        color: '#5E6E87',
        fontFamily: '微软雅黑',
        fontWeight: 'normal'
      },
      data: ['店均线索量','店均发布量','400成功接起率'],
      z: 3,
      top:'30'
    },
    tooltip : { 
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'         // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params){
            // console.log(params)
            return params.name +"<br/>"+params.seriesName+": "+ params.value
        },
      },
    grid: {
        top: 95,
        right: 20,
        bottom: 20,
        left: 20,
        containLabel: true
    },
    xAxis: [
        {
          // interval: 0,
          type: 'category',
          data: ['1月','1月','1月','4月','1月','1月','1月'],
          /*axisTick: {
            alignWithLabel: true
          },*/
          axisLabel: {
            interval: 0,
            color: '#333B48'
          },
          axisLine: {//轴线样式
            show: true,
            lineStyle: {
                color: '#E5ECF1'
            }
          },
          axisPointer: {
            type: 'shadow'
          }
        }
    ],
    yAxis: [ 
        {
          type : 'value',
          splitLine: {//分隔线样式
            // show: false
            lineStyle: {
              color: '#E5ECF1'
            }
          },
          axisLine: {//轴线样式
            show: true,
            lineStyle: {
              color: '#E5ECF1'
            }
          },
          axisLabel: {//刻度文字样式
            color: '#333B48'
          }
        },
        {
          type: 'value',
          splitLine: {show: false},
          axisLine: {//轴线样式
            show: true,
            lineStyle: {
              color: '#E5ECF1'
            }
          },
          axisLabel: {//刻度文字样式
            color: '#333B48'
          }
        }
    ],
    series: [
        {
          label: {
                normal: {
                    position: 'top',
                    show: true,
                    color: '#333'
                }
            },
          z: 3,
          name:'店均线索量',
          type:'bar',
          cursor: 'auto',
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          label: {
                normal: {
                    position: 'top',
                    show: true,
                    color: '#333'
                }
            },
          name:'店均发布量',
          type:'bar',
          cursor: 'auto',
          data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
          // symbol: spirit,
          symbolRepeat: 'fixed',
          symbolMargin: '5%',
          symbolClip: true,
          symbolSize: 3.5,//30
          label: {
            normal: {
              formatter: function(params){
                return parseInt((params.value)*100)+'%';
              },
              position: 'top',
              show: true,
              color: '#333'
            }
          },
          tooltip: {
            formatter: function(params){
                // console.log(params)
                return params.name +"<br/>"+params.seriesName+": "+ parseInt((params.value)*100) +"%"
            },  
          },
          name:'400成功接起率',
          type:'line',
          cursor: 'auto',
          smooth: true,
          yAxisIndex: 1,
          z: 10,
          data: [0.220, 0.182, 0.191, 0.234, 0.290, 0.330, 0.310]
        }
    ]
  };
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>